// import React,{Component} from 'react'
import React from 'react'
import ReactDOM from "react-dom"
//使用class创建组件,必须要继承与React.Component,并且内部必须要返回一个JSX的虚拟DOM对象或者返回 null
// class Com extends Component {
//     render() {
//         return <div>这是通过calss创建出来的组件</div>
//     }
        
// }
//注意:不论是通过class还是function 的方式创建出来的组件,传的值都是只读的
//class创建的组件叫有状态组件(里面有state以及生命周期),function 的方式创建出来的组件为无状态组件
//class创建出来的组件,不仅有props,还有自己的私有数据以及申明周期,但是function创的只有props
class Com extends React.Component {
    constructor(){
        super();
        this.state = {//数据是可以修改的
            msg:'我是组件里面带的私有数据'
        }
    }
    render() {
        this.state.msg = '我的值被修改了'
        //在class内部可直接通过this.props.***的方法拿到传给组件的数据
        return <div>这是通过calss创建出来的组件-----{this.props.name}
            <h1>{this.state.msg}</h1>
        </div> 
    }
        
}
let user = {
    name:'zlw'
}
ReactDOM.render(<div>
    {/*  <Com>是Com的实例对象 */}
   <Com {...user}></Com>
</div>,document.getElementById('root'))